import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root
  property var extra_data: ({ name: "", data: {} })
  signal finish()
  
  Item {  
    id:areaItem
    anchors.fill: parent
    anchors.topMargin: 40
    anchors.leftMargin: 130
    anchors.rightMargin: 130
    anchors.bottomMargin: 20

    Component {
      id: cardDelegate
      CardItem {
        Component.onCompleted: {
          setData(modelData);
        }
        showDetail: true
      }
    }
  
    Repeater {
      id: areaRepeater
      model: 4

      delegate: Rectangle {
        color: "#544732"
        width: 95
        height: 132
        radius: 5
        opacity: 0.7

        property var positions: [
          { // 北
            x: parent.width/2 - width/2,
            y: 10
          },
          { // 南
            x: parent.width/2 - width/2,
            y: parent.height - height - 10
          },
          { // 西
            x: 10,
            y: parent.height/2 - height/2
          },
          { // 东
            x: parent.width - width,
            y: parent.height/2 - height/2 - 10
          }
        ]

        // 动态绑定位置
        x: positions[index].x
        y: positions[index].y        

        // 显示位置标签
        Text {
            anchors.top: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            text: ["北♦", "南♥", "西♣", "东♠"][index]
            font.pixelSize: 18
            font.family: fontLibian.name
            color: "#ffffff"
        }
      }
    }

    Repeater {
      id: cardRepeater
      model: getCardsFromData()

      delegate: CardItem {
        Component.onCompleted: {
          setData(modelData);
        }
        showDetail: true

        property var positions: [
          { // 北
            x: parent.width/2 - width/2,
            y: 10
          },
          { // 南
            x: parent.width/2 - width/2,
            y: parent.height - height - 10
          },
          { // 西
            x: 10,
            y: parent.height/2 - height/2
          },
          { // 东
            x: parent.width - width,
            y: parent.height/2 - height/2 - 10
          }
        ]

        x: positions[index].x
        y: positions[index].y
      }
    }
  }

  Text {
    anchors.horizontalCenter: parent.horizontalCenter
    y: 5
    text: "四相"
    font.pixelSize: 30
    font.family: fontLibian.name
    color: "#E4D5A0"
    font.weight: Font.Medium
  }

  function getCardsFromData(){
    const cids = extra_data.data._tab;
    if (typeof(cids) === 'undefined') return;
    return cids.map(cid => {
      if (typeof cid === 'object') {
        return cid;
      }
      return lcall("GetCardData", cid);
    })
  }
}
